/* 首页 */
.homepage {
    background: url("../images/bg.jpg") no-repeat;
    background-size: 100%;
}

.home_tit {
    position: absolute;
    left: 50%;
    margin-left: -3.11rem;
    top: 2.21rem;
}

.home_tits {
    -webkit-animation: fadeInDown 0.5s linear both;
}

.home_ico1 {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: fadeIn 0.5s linear 0.5s both;
}

.home_ico3 {
    position: absolute;
    left: 0.6rem;
    top: 3.19rem;
    -webkit-animation: fadeIn 0.5s linear 0.5s both;
}

.home_tit2 {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: fadeInUp 0.5s linear both;
}


.home_logo {
    position: absolute;
    left: 50%;
    margin-left: -2.06rem;
    top: 12.25rem;
    -webkit-animation: fadeInUp 0.5s linear 1s both;
}

.home_personage {
    width: 100%;
    height: 1.11rem;
    position: absolute;
    left: 0;
    top: 8.48rem;
    text-align: center;
}

.home_personage > div {
    position: relative;
    width: 1.20rem;
    height: 1.19rem;
    margin: 0 0.2rem;
    display: inline-block;
    vertical-align: top;
}

.home_personage > div:nth-child(1) {
    -webkit-animation: fadeInLeft 0.5s linear 0.5s both;
}

.home_personage > div:nth-child(2) {
    -webkit-animation: fadeInRight 0.5s linear 0.5s both;
}

.home_sex_txt {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    bottom: -0.15rem;
}

.home_sextip {
    position: absolute;
    left: 50%;
    margin-left: -1.32rem;
    top: 10.3rem;
    -webkit-animation: bounceIn 0.5s linear 0.8s both;
}

.home_sextip img {
    -webkit-animation: pulse 0.5s linear 0.8s infinite;
}


.home_btn {
    background: url("../images/home_btn.png") no-repeat;
    background-size: 100%;
    width: 3.07rem;
    height: 0.9rem;
    position: absolute;
    left: 50%;
    margin-left: -1.535rem;
    top: 10.3rem;
    -webkit-animation: pulse 0.7s linear infinite;
}

.home_sex_b {
    position: absolute;
    left: 0.6rem;
    top: -0.9rem;
}

.home_sex_g {
    position: absolute;
    left: -1.2rem;
    top: -0.9rem;
}

.home_sex_av {
    -webkit-animation: bounceIn 0.5s linear both;
    position: relative;
    z-index: -1;
}

/*选择元素和场景 */

#canvas {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.game_tipbox {
    background: rgba(0, 0, 0, 0.6);
}

.game_tip2 {
    position: absolute;
    left: 1.5rem;
    bottom: 2.3rem;
    -webkit-animation: fadeInDown 0.6s linear both;
}

.game_tip2 img {
    -webkit-animation: arrowY 2s linear infinite alternate;
}

.Scene_box {
    background: url("../images/Scene_bg.png") no-repeat;
    background-size: 100%;
    width: 7.46rem;
    height: 3.28rem;
    position: absolute;
    left: 0.02rem;
    bottom: 0;
    z-index: 5;
}

.Scene_box .game_arrowL, .Scene_box .game_arrowR {
    bottom: 30%;
}

.game_Return {
    position: absolute;
    left: 0.4rem;
    top: 0.3rem;
    background: url("../images/game_Return.png") no-repeat;
    background-size: 100%;
    width: 0.6rem;
    height: 0.59rem;
    z-index: 1;
}

.game_ok {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    -webkit-animation: fadeInRight 1s linear both;
}

.game_arrowL {
    background: url("../images/game_arrow_l.png") no-repeat;
    background-size: 100%;
    width: 0.38rem;
    height: 0.4rem;
    position: absolute;
    left: 0;
    bottom: 40%;
    z-index: 2;
    -webkit-animation: arrowXl 1s linear infinite alternate;
}

.game_arrowR {;
    background: url("../images/game_arrow_r.png") no-repeat;
    background-size: 100%;
    width: 0.38rem;
    height: 0.4rem;
    position: absolute;
    right: 0;
    bottom: 40%;
    z-index: 2;
    -webkit-animation: arrowXR 1s linear infinite alternate;
}

.Scene_ok {
    position: absolute;
    right: -0.02rem;
    top: -1.4rem;
    z-index: 2;
}

.Scene_ico {
    width: 98%;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    text-align: left;
    margin-left: 1%;
    margin-top: 1.3rem;
}

.Scene_ico div {
    display: inline-block;
    width: 2.16rem;
    height: 1.58rem;
    position: relative;
    margin-top: 0.1rem;
}

.Scene_ico img {
    width: 2.05rem;
}

.Scene_ico .game_Active:before {
    content: '';
    background: url("../images/scene_active.png") no-repeat;
    background-size: 100%;
    width: 2.16rem;
    height: 1.45rem;
    position: absolute;
    left: 0;
    top: -0.02rem;
    z-index: -1;
}

.game_Active:after {
    content: "";
    background: url("../images/active_btn.png") no-repeat;
    background-size: 100%;
    width: 0.36rem;
    height: 0.36rem;
    position: absolute;
    right: 0.15rem;
    top: 0.2rem;
}


.game_menubox {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    -webkit-transition: all 0.5s linear;
}

.gametip {
    position: absolute;
    left: 2%;
    top: -1rem;
    -webkit-animation: fadeInDown 0.6s linear both;
}

.gametip img {
    -webkit-animation: fadeOut 1s 3s linear both;
}


.game_menu {
    background: url("../images/game_menu.png") no-repeat;
    background-size: 100%;
    width: 7.46rem;
    height: 1.01rem;
    position: relative;
}

.game_ico {
    position: absolute;
    padding: 0.2rem 0.3rem;
    right: 0;
    top: 0.15rem;
    -webkit-transition: all 0.2s linear;
    -webkit-transform: rotate(180deg);
}

.gameMenu_btn {
    width: 6.6rem;
    height: 100%;
    position: relative;
}

.gameMenu_btn > div {
    position: absolute;
    left: 0;
    top: -0.1rem;
    z-index: 2;
}

.gameMenu_btn > div:nth-child(1) {
    left: 0.02rem;
}

.gameMenu_btn > div:nth-child(2) {
    left: 1.02rem;
}

.gameMenu_btn > div:nth-child(3) {
    left: 2.06rem;
}

.gameMenu_btn > div:nth-child(4) {
    left: 3.1rem;
}

.gameMenu_btn > div:nth-child(5) {
    left: 4.24rem;
}

.gameMenu_btn > div:nth-child(6) {
    left: 5.34rem;
}

.game_icocont {
    background: url("../images/game_menu_bg.png") no-repeat;
    background-size: 100%;
    width: 100%;
    height: 2.22rem;
    position: relative;
    margin-top: -0.03rem;
}


.game_icobox, .game_icobox2 {
    width: 98%;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    text-align: left;
    margin-left: 1%;
    position: relative;
}

.game_icobox div {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    background: #d4eef8;
    margin: 0.3rem 0.08rem;
}

.game_icobox div img {
    width: 1.6rem !important;
}

.game_icobox2 div {
    display: inline-block;
}

.game_icobox2 div div {
    width: 1.6rem;
    height: 1.6rem;;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    margin: 0.3rem 0.08rem;
}

.game_icobox2 div img {
    width: 1.6rem !important;
}

.game_hadebtn {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    margin: 0.3rem 0.08rem;
}
